<script setup lang="ts">
import {useRoute, useRouter} from 'vue-router'
import {onMounted, reactive, ref} from 'vue'
import api from '@/api/index'
import type {collectionInfo} from '@/types'
import {Back} from "@element-plus/icons-vue";

const route = useRoute()
const router = useRouter()

const namespace = ref<string>(<string>route.params.namespace)
const collectionName = ref<string>(<string>route.params.collectionName)

let collectionInfo = reactive<collectionInfo>({
  collectionComment: "",
  collectionName: "",
  faceColumns: [],
  namespace: "",
  replicasNum: 0,
  sampleColumns: [],
  shardsNum: 0,
  storageEngine: "",
  storageFaceInfo: false
})


onMounted(() => {
  api.getCollectionInfo(namespace.value, collectionName.value)
      .then(res=>{
        if(res.data.code === 0){
          Object.assign(collectionInfo,res.data.data)
        }
      })

})

</script>

<template>
  <el-button type="primary" :icon="Back" @click="router.back()">返回</el-button>
  <el-form :model="collectionInfo" label-width="auto" >
    <el-form-item label="namespace（命名空间）：">
      {{ collectionInfo.namespace }}
    </el-form-item>
    <el-form-item label="collectionName（集合名称）：">
      {{ collectionInfo.collectionName }}
    </el-form-item>
    <el-form-item label="collectionComment（集合描述）：">
      {{ collectionInfo.collectionComment }}
    </el-form-item>
    <el-form-item label="replicasNum（数据分片中最大的文件个数）：">
      {{ collectionInfo.replicasNum === null ?0:collectionInfo.replicasNum }}
    </el-form-item>
    <el-form-item label="shardsNum（要创建的集合的分片数）：">
      {{ collectionInfo.shardsNum }}
    </el-form-item>
    <el-form-item label="sampleColumns（自定义的样本属性字段）：">
      <el-table :data="collectionInfo.sampleColumns" style="width: 100%">
        <el-table-column prop="name" label="Name" />
        <el-table-column prop="comment" label="Comment" />
        <el-table-column prop="dataType" label="DataType" />
      </el-table>
    </el-form-item>
    <el-form-item label="faceColumns（自定义的人脸属性字段）：">
      <el-table :data="collectionInfo.faceColumns" style="width: 100%">
        <el-table-column prop="name" label="Name" />
        <el-table-column prop="comment" label="Comment" />
        <el-table-column prop="dataType" label="DataType" />
      </el-table>
    </el-form-item>
    <el-form-item label="storageFaceInfo（是否保留图片及人脸信息）：">
     {{ collectionInfo.storageFaceInfo }}
    </el-form-item>
    <el-form-item label="storageEngine（保留图片及人脸信息的存储组件）：">
     {{ collectionInfo.storageEngine }}
    </el-form-item>
  </el-form>

</template>

<style scoped>
</style>